import 'package:flutter/material.dart';
import 'package:wechat/contacts/contacts_data.dart';

class ContactsSliderList extends StatefulWidget {
  final List<ContactsData> items;
  final IndexedWidgetBuilder headerBuilder;
  final IndexedWidgetBuilder itemBuilder;
  final IndexedWidgetBuilder sectionBuilder;
  const ContactsSliderList(
      {super.key,
      required this.items,
      required this.headerBuilder,
      required this.itemBuilder,
      required this.sectionBuilder});

  @override
  State<ContactsSliderList> createState() => _ContactsSliderListState();
}

class _ContactsSliderListState extends State<ContactsSliderList>
    implements SectionIndexer {
  Color _pressColor = Colors.transparent;
  final ScrollController _scrollController = ScrollController();

  bool _onNotification(ScrollNotification notification) {
    return true;
  }

  _isShowHeaderView(index) {
    if (index == 0 && widget.headerBuilder != null) {
      return Offstage(
        offstage: false,
        child: widget.headerBuilder(context, index),
      );
    }
    return Container();
  }

  bool _shouldShowHeader(int position) {
    if (position < 0) {
      return false;
    }
    if (position == 0) {
      return false;
    }
    if (position != 0 &&
        widget.items[position].sectionKey !=
            widget.items[position - 1].sectionKey) {
      return false;
    }
    return true;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: [
          NotificationListener(
            onNotification: _onNotification,
            child: ListView.builder(
              controller: _scrollController,
              physics: const AlwaysScrollableScrollPhysics(),
              itemCount: widget.items.length,
              itemBuilder: (context, index) {
                return Container(
                  alignment: Alignment.centerLeft,
                  child: Column(
                    children: [
                      _isShowHeaderView(index),
                      Offstage(
                        offstage: _shouldShowHeader(index),
                        child: widget.sectionBuilder(context, index),
                      ),
                      Column(
                        children: [
                          widget.itemBuilder(context, index),
                        ],
                      )
                    ],
                  ),
                );
              },
            ),
          ),
          Positioned(
            right: 0,
            top: 80,
            child: Container(
              alignment: Alignment.center,
              height: MediaQuery.of(context).size.height,
              width: 32,
              color: _pressColor,
              child: GestureDetector(
                onTapDown: (details) {
                  setState(() {
                    _pressColor = Colors.grey;
                  });
                },
                onTapUp: (details) {
                  setState(() {
                    _pressColor = Colors.transparent;
                  });
                  int index = details.localPosition.dy ~/ 21;
                  listScrollPosition(index);
                },
                onVerticalDragStart: (details) {
                  setState(() {
                    _pressColor = Colors.grey;
                  });
                },
                onVerticalDragEnd: (details) {
                  setState(() {
                    _pressColor = Colors.transparent;
                  });
                },
                onVerticalDragUpdate: (details) {
                  // setState(() {
                  //   _pressColor = Colors.grey;
                  // });
                },
                child: ListView.builder(
                  itemCount: sliderBarKey.length,
                  itemBuilder: (BuildContext context, int index) {
                    return Container(
                      alignment: Alignment.center,
                      height: 17,
                      child: Text(sliderBarKey[index]),
                    );
                  },
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }

  @override
  listScrollPosition(int index) {
    for (int i = 0; i < widget.items.length; i++) {
      if (sliderBarKey[index] == "☆" || sliderBarKey[index] == "↑") {
        _scrollController.jumpTo(0);
        setState(() {
          _pressColor = Colors.transparent;
        });
        return -1;
      } else if (widget.items[i].sectionKey == sliderBarKey[index]) {
        _scrollController.jumpTo(index * 96);
        return i;
      }
    }
    return -1;
  }
}

abstract class SectionIndexer {
  listScrollPosition(int index);
}

const sliderBarKey = <String>[
  "↑",
  "☆",
  "A",
  "B",
  "C",
  "D",
  "E",
  "F",
  "G",
  "H",
  "I",
  "J",
  "K",
  "L",
  "M",
  "N",
  "O",
  "P",
  "Q",
  "R",
  "S",
  "T",
  "U",
  "V",
  "W",
  "X",
  "Y",
  "Z",
  "#"
];
